// 和用户管理有关的功能

// 引入二级路由的模板 

import usersView from '@/users.ejs';

// 引入 api模块 
import axios from "../api/index.js";

let baseURL = axios.defaults.baseURL;
console.log(baseURL);

// 封装一个getdata函数用于获取用户信息渲染页面
async function getdata (res, p = 1) {
  // 发送ajax获取用户信息
  // 获取数据的时候 更加 页码来获取 默认给一个页码 p = 1;
  let { data } = await axios.get("/user/getdata", {
    params: {
      p
    }
  })
  console.log(data);
  res.render(usersView({ users: data.users, baseURL, pageCount: data.pageCount }))// 渲染 需要等到 数据获取之后再渲染 
}

// 绑定生成dom节点之后的点击事件
async function addEvent (res) {

  // 点击添加用户 
  // 一、点击按钮的时候 显示添加用户的对话框 
  let addUserBtn = document.querySelector(".adduer");

  // 获取添加的对话框 
  let adduermodelEle = document.querySelector(".adduermodel");
  // 遮罩层元素
  let maskEle = document.querySelector(".mask");

  addUserBtn.onclick = function () {
    console.log("点击了");
    // 点击添加按钮的时候  让对话框和 遮罩层显示出来
    adduermodelEle.style.display = "block";
    maskEle.style.display = "block";
  }

  // 二 点击 关闭的时候 关闭 对话框 
  let closebtnEle = document.querySelector(".closebtn");

  closebtnEle.onclick = function () {
    adduermodelEle.style.display = "none";
    maskEle.style.display = "none";
  }

  // 三 点击 提交按钮的时候  提交用户的信息 到后端。
  let imgFileEle = document.querySelector(".imgFile");
  let imgshowEle = document.querySelector(".imgshow")

  imgFileEle.onchange = function () {
    // input 发生改变的时候触发函数；
    console.log("发生改变了!!");
    // 获取上传的图片对象
    // 通过 input.files
    // console.log(this.files[0])
    let imgObj = this.files[0];
    let filerader = new FileReader();
    filerader.readAsDataURL(imgObj);  // 把图片对象转成url形式的数据，base64格式
    // 需要在filerader读完数据之后 获取base64
    filerader.onload = function () {
      // 读取完毕了，获取base64字符串
      // console.log(filerader.result);
      let myimg = new Image(); // 创建一个img 标签
      myimg.src = filerader.result; // 设置图片的路径地址是获取到的base64的路径
      myimg.style.width = "100px";
      myimg.style.height = "100px";
      // 把图片的对象添加到html里
      imgshowEle.innerHTML = ""; // 请求显示的div里的内容
      imgshowEle.appendChild(myimg);
    }
  }

  // 点击提交按钮的时候 发送ajax
  let submitBtn = document.querySelector(".btn");
  let usernameEle = document.querySelector(".username");
  let pwdEle = document.querySelector(".pwd");
  let repeatpwdEle = document.querySelector(".repeatpwd");
  submitBtn.onclick = async function () {
    // 发送ajax 测试 
    // 获取用户名和密码
    let username = usernameEle.value;
    let pwd = pwdEle.value;
    let repeatpwd = repeatpwdEle.value;
    // 获取文件对象
    let imgfile = imgFileEle.files[0]; // 文件对象


    // 表单的校验 
    if (username == "") {
      return alert("用户名不能为空")
    }

    if (pwd == "") {
      return alert("密码不能为空")
    }

    // 两次输入的密码要一致
    if (pwd !== repeatpwd) {
      return alert("两次输入的密码不同");
    }

    // 文件不能是undefined
    if (typeof imgfile == 'undefined') {
      return alert("图像不能为空");
    }

    console.log(username, pwd, imgfile);

    // 借助 FormData 预定义类
    let form = new FormData();  // 模拟一个空的form表单
    form.append("username", username);
    form.append("pwd", pwd);
    form.append("myimg", imgfile);
    // console.log(form);
    // 把form当成数据直接提交给后端 ，自动设置请求头部信息 
    let { data } = await axios.post("/user/adduser", form);
    if (data.status == 1) {
      // 需要把对话框隐藏起来
      alert("添加用户成功");
      adduermodelEle.style.display = "none";
      maskEle.style.display = "none";
      // 添加成功之后 要获取最新数据 在调用render方法渲染到页面上
      await getdata(res); // 调用ajax 获取最新的数据，然后再渲染到页面上
      await addEvent(res); // 绑定事件
    }
    //   console.log("点击了提交按钮");
    //   let res = await axios.get("/user/getdata");
    //   console.log(res);
  }
  // 点击按钮删除用户的功能；
  // 获取所有的删除按钮 
  let delBtns = document.querySelectorAll(".delBtn");
  // 循环绑定事件
  delBtns.forEach(btn => {
    btn.onclick = async function () {
      console.log("点击了删除");
      // 点击删除按钮的时候 获取点击按钮的数据id的值；发送ajax给后端携带id的值
      // 获取这条数据的id
      let _id = this.getAttribute("myid");
      console.log(_id);
      // 发送ajax把id传递给后端 删除数据
      // 询问框 确定删除
      let result = confirm("你确定要删除吗？");
      if (result) {
        // 发送ajax然后再删除数据库里的内容 数据库 通过更新代替删除，数据没有删除，只是查询数据的时候不查询处理，定期在把数据删除。
        let { data } = await axios.delete("/user/deluser", {
          params: {
            _id
          }
        })
        console.log(data); // 后端返还的结果值
        if (data.status == 1) {
          await getdata(res); // 重新渲染视图
          await addEvent(res); // 绑定事件
        } else {
          console.log(data);
        }
      }
    }
  })

  // 分页逻辑
  let pageEles = document.querySelectorAll(".pageContainer a");
  pageEles.forEach(pageEle => {
    pageEle.onclick = async function (e) {
      // 阻止 a的默认跳转行为
      e.preventDefault();
      // 获取当前点击的页码
      let p = this.innerHTML;
      p = p.trim();
      await getdata(res, p);
      await addEvent(res);
    }
  })
}

export default function (router) {
  router.route("/admin/users", async (req, res) => {
    await getdata(res);  // 渲染视图
    await addEvent(res); // 绑定事件
    // res.render(usersView());

    //退出登录
    let loginout = document.querySelector(".loginout")
    loginout.onclick = function () {
      let reslut = confirm("你确定要退出吗?");
      if (reslut) {
        router.go("/login")
      }
    }
  })
}
